<template>
	<view class="container">
		<!-- 空白页 -->
		<empty v-if="emptyShow" :custom="true" src="../../../static/images/no-orders.png" :text="emptyTxt"></empty>
		<view class="cardRecord">
			<scroll-view class="scroll-view_H" scroll-x="true" @scrolltolower="loadMore">
				<view class="recordBox">
					<view class="recordItem" :class="active == index?'active':''" v-for="(item,index) in cardList" :key="index" @tap="clickCard(index,item)">
						<view class="title">
							<text class="a clamp">{{item.card_name}}</text>
							<text class="b green" v-if="item.period_effect == 1&&item.status == 1">可使用</text>
							<text class="b orange" v-if="item.period_effect == 1&&item.status == 2">未激活</text>
							<text class="b gray" v-if="item.period_effect == 0">已失效</text>
						</view>
						<view class="cardInfo" v-if="item.period_effect == 0||item.status == 1">
							<text class="a">{{item.card_number}}</text>
							<text class="b">{{item.realname}}</text>
						</view>
						<view class="time" v-if="item.period_effect == 0||item.status == 1">
							<text class="a">{{item.validfrom}} ~ {{item.validtime}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="reserveList">
			<view class="reserveTit">预约记录</view>
			<view class="reserveItem" v-for="(item,index) in reserveList" :key="index">
				<view class="no" :class="'bgColor' + item.states">
					<text class="a">单号：{{item.orderno}}</text>
					<text class="b" v-if="item.states == 0">预约中</text>
					<text class="b" v-if="item.states == 1">预约成功</text>
					<text class="b" v-if="item.states == 3">已取消</text>
					<text class="b" v-if="item.states == 2">预约失败</text>
				</view>
				<view class="title">
					<text class="a">{{item.title}}</text>
					<text class="b" :class="'color' + item.states" v-if="item.states == 0" @tap="cannel(item)">取消预约</text>
					<text class="b" :class="'color' + item.states" v-if="item.states == 1" @tap="showMa(item)">出票信息</text>
					<text class="b" :class="'color' + item.states" v-if="item.states == 2" @tap="showReason(item)">查看原因</text>
				</view>
				<view class="time">
					预约时间：{{item.booktimestr}}
				</view>
			</view>
			<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
			<z-modal ref="zmodal" content="确定取消预约？" confirmText="确定" cancelText="取消" @confirm="onOnConfirm"></z-modal>
			<z-modal ref="zmodal1" :content="reason" confirmText="确定" :cancelShow="false"></z-modal>
		</view>
	</view>
</template>

<script>
	import {
		travelGetAllCardList,
		travelScenicReserveList,
		travelScenicCancelReserve
	} from "@/api/user.js"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty/empty";
	import zModal from "@/components/z-modal/z-modal.vue"
	export default {
		components: {
			uniLoadMore,
			empty,
			zModal
		},
		data() {
			return {
				reason: "",
				emptyTxt: "",
				active: 0,
				utcid: 0,
				reserveid: 0,
				cardTitle: "",
				emptyShow: false,
				page: 1,
				limit: 10,
				cardList: [],
				reserveList: [],
				nomore: false,
				loadStatus: "loading",
				contentText: {
					contentdown: "",
					contentrefresh: "正在加载...",
					contentnomore: ""
				},
			};
		},
		onLoad(options) {
			this.cardTitle = options.title
			this.getCardList()
		},
		methods: {
			getCardList() {
				travelGetAllCardList({
					page: this.page,
					limit: this.limit
				}).then(res => {
					uni.hideLoading()
					this.cardList.push.apply(this.cardList, res.data);
					if (res.data.length < this.limit) this.nomore = true; //判断所有数据是否加载完成；
					if (this.page == 1 && this.cardList.length) {
						this.utcid = this.cardList[0].utcid
						this.getReserveList(this.cardList[0].utcid)
					}
					this.page = this.page + 1;
					if (this.cardList.length == 0) {
						this.loadStatus = "noMore"
						this.emptyShow = true
						this.emptyTxt = "您还没有旅游卡记录哦"
					}
				})
			},
			getReserveList(id) {
				travelScenicReserveList({
					utcid: id
				}).then(res => {
					this.loadStatus = "noMore";
					if (res.data.length) {
						this.reserveList = res.data
					} else {
						this.emptyShow = true
						this.emptyTxt = "该旅游卡还没有预约记录哦"
					}

				})
			},
			clickCard(index, item) {
				this.active = index
				this.reserveList = []
				this.utcid = item.utcid
				this.loadStatus = "loading";
				this.emptyShow = false
				this.getReserveList(item.utcid)
			},
			loadMore() {
				if (!this.nomore) {
					this.getCardList()
				}
			},
			showMa(item) {
				uni.navigateTo({
					url: "./tourismMa?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			cannel(item) {
				this.reserveid = item.id
				this.$refs.zmodal.show()
			},
			showReason(item) {
				this.reason = item.prmk
				this.$refs.zmodal1.show()
			},
			onOnConfirm() {
				uni.showLoading({
					mask: true
				})
				travelScenicCancelReserve({
					id: this.reserveid,
					utcid: this.utcid
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "取消成功"
					})
					this.getReserveList(this.utcid)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.container {
		.cardRecord {
			width: 100%;
			overflow: hidden;

			.recordBox {
				padding: 30rpx;
				display: flex;

				.recordItem {
					width: 390rpx;
					min-width: 390rpx;
					box-sizing: border-box;
					padding: 25rpx;
					margin-right: 20rpx;
					background: #fff;
					border-radius: 10rpx;
					border: 2rpx solid #fff;

					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.a {
							flex: 1;
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
						}

						.b {
							height: 40rpx;
							border-radius: 10rpx;
							line-height: 40rpx;
							font-size: 24rpx;
							padding: 4rpx 10rpx;
						}

						.green {
							background: #E5F9E9;
							color: #57BE6A;
						}

						.orange {
							background: #E9F6FF;
							color: #2699F0;
						}

						.gray {
							background: #fafafa;
							color: #999;
						}
					}

					.cardInfo {
						margin-top: 16rpx;
						display: flex;
						font-size: 24rpx;
						color: #666;

						.b {
							margin-left: 10rpx;
						}
					}

					.time {
						margin-top: 16rpx;
						font-size: 24rpx;
						color: #bbb;
					}
				}

				.active {
					border: 2rpx solid #2699F0;
					box-shadow: 0px 6rpx 6rpx 0px rgba(136, 136, 136, 0.1);
				}
			}
		}

		.reserveList {
			padding: 0 30rpx 30rpx;
			position: relative;
			z-index: 9;

			.reserveTit {
				font-weight: bold;
				font-size: 36rpx;
				margin-bottom: 20rpx;
			}

			.reserveItem {
				background: #fff;
				border-radius: 8rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				.no {
					padding: 0 25rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 60rpx;
					font-size: 24rpx;

					.b {
						font-weight: bold;
					}
				}

				.bgColor0 {
					background: #E9F6FF;
					color: #2699F0;
				}

				.bgColor1 {
					background: #E5F9E9;
					color: #57BE6A;
				}

				.bgColor3 {
					background: #fafafa;
					color: #999;
				}

				.bgColor2 {
					background: #FFF0EE;
					color: #FC7D68;
				}

				.title {
					padding: 25rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.a {
						font-size: 36rpx;
						font-weight: bold;
					}

					.b {
						font-size: 30rpx;
					}

					.color0 {
						color: #2699F0;
					}

					.color1 {
						color: #57BE6A;
					}

					.color2 {
						color: #FC7D68;
					}
				}

				.time {
					font-size: 28rpx;
					color: #333;
					padding: 0 25rpx 25rpx;
				}
			}

		}
	}
</style>
